<template>
  <div>
    <van-nav-bar title="影院" @click-left="onClickLeft" @click-right="onClickRight">
      <template #left>
        {{ cityName }}
        <van-icon name="arrow-down" />
      </template>
      <template v-slot:right>
        <van-icon name="search" size="20" />
      </template>
    </van-nav-bar>

    <div class="cinema" :style="{ height }">
      <ul>
        <li v-for="item in cinemaList" :key="item.cinemaId">
          <div>{{ item.name }}</div>
          <div class="address">{{ item.address }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import BetterScroll from 'better-scroll'
export default {
  data() {
    return {
      height: 0
    }
  },
  computed: {
    ...mapState('Cinema', ['cinemaList']),
    ...mapState('City', ['cityName', 'cityId']),
  },
  methods: {
    ...mapActions('Cinema', ['getCinemaList']),
    onClickRight() {
      this.$router.push('/cinema/search')
    },
    onClickLeft() {
      this.$router.push('/city')
    }
  },
  async mounted() {
    this.height = document.documentElement.clientHeight - 96 + 'px'
    await this.getCinemaList(this.cityId)
    new BetterScroll('.cinema', {
      scrollbar: {
        fade: true
      }
    })
  }
}
</script>

<style lang="less" scoped>
.cinema {
  position: relative;

  li {
    padding: 5px;

    .address {
      font-size: 12px;
      color: gray;
    }
  }
}
</style>